import React from "react";
import {Link} from 'react-router-dom';
import logo from '../../../images/logo.png';
import frame from "../../../style/frame.less";
import * as Http from "../../utils/http";

class Register extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            protocol: false,
            register: new Http.URL('/register.do'),
            getCheckCode: new Http.URL('/register.do/email/getCheckCode'),
        }
    }

    componentDidMount() {

    }

    handleInputChange = event => {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.id;
        this.setState({
            [name]: value
        });
    }

    doGetCheckCode = () => {
        const {getCheckCode, email} = this.state;
        if (email == '') {
            alert("email不能为空!");
            return;
        }

        getCheckCode
            .setParameters(
                {email}
            )
            .post()
            .then(data => {
                if (data == undefined) {

                } else if (data != undefined && data.code != 200) {
                    alert(data.msg);
                } else {
                    alert("获取成功");
                }
            })
            .then(() => {
            })
    }

    doRegister = () => {
        const {register, email, account, phone, password, confirm, checkCode, argee} = this.state;

        if (email == '' || email == undefined) {
            alert(" email不能为空！");
            return;
        }

        if (password != confirm) {
            alert(" 密码输入不一致！");
            return;
        }

        if (!argee) {
            alert(" 请勾选“阅读并接受****Cloud用户协议”");
            return;
        }

        register
            .setParameters(
                {email, account, password, phone, checkCode}
            )
            .post()
            .then(data => {
                if (data.code == 200) {
                    alert("注册成功");
                    window.location.href = '/login';
                } else {
                    alert(data.msg);
                }

                //do something
            })
            .then(() => {
                //do something
            })
    };


    render() {
        return (
            <div className={frame.registerContentCld}>
                <div className={frame.registerContent}>
                    <div className={frame.title}>
                        <a href='/'>
                            <img src={logo} alt="logo"/>
                            <span className={frame.fontRegister}>****Cloud</span>
                        </a>
                    </div>

                    <div className={frame.intro}>
                        为企业级用户&nbsp;|&nbsp;个人消费者用户助力
                    </div>

                    <div className={frame.registerLable}>
                        <h3>
                            <span>注册</span>
                        </h3>
                        <div className={frame.registerFrom}>
                            <div>
                                <input onChange={this.handleInputChange} placeholder="邮箱" type='text' id='email'/>
                            </div>
                            <div>
                                <input onChange={this.handleInputChange} placeholder="用户名(登录名)" type='text'
                                       id='account'/>
                            </div>
                            <div>
                                <input onChange={this.handleInputChange} placeholder="手机号" type='text'
                                       id='phone'/>
                            </div>
                            <div>
                                <input onChange={this.handleInputChange} placeholder="至少6位密码区分大小写" type='password'
                                       id='password'/>
                            </div>
                            <div>
                                <input onChange={this.handleInputChange} placeholder="确认密码" type='password'
                                       id='confirm'/>
                            </div>
                            <div className={frame.vCode}>
                                <input onChange={this.handleInputChange} placeholder="验证码" type='text' id='checkCode'
                                       style={{width: '253px', marginRight: '20px'}}/>
                                <button type='button' style={{cursor: 'pointer'}} onClick={this.doGetCheckCode}>
                                    <span className={frame.changeColor}>获取验证码</span>
                                </button>
                            </div>
                            <div className={frame.argee}>
                                <label>
                                    <span>
                                        <input onChange={this.handleInputChange} type='checkbox' id='argee'
                                               style={{float: 'left', margin: '6px'}}/>
                                    </span>
                                    <span>
                                        我已阅读并同意
                                    </span>
                                </label>
                                <span style={{padding: '0px'}}>
                                    <a href="" target="_blank" className={frame.protocol}>《****Cloud用户协议》</a>
                                </span>
                            </div>
                            <div className={frame.buttonResgister}>
                                <span>
                                    <button onClick={this.doRegister}>
                                        <span>注册</span>
                                    </button>
                                    <a href='/login'>
                                        使用已有账户登录
                                    </a>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div style={{height: '100px'}}>
                    </div>
                </div>
            </div>
        )
    }
}

export default Register
